<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
      <title>:::www.bluelogic.com.br:::</title>
        <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    </h:head>
	<script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-27099123-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    
    </script>
    <h:body>
    	 <script type="text/javascript">
			function BuscaArtigos(parametro){										
				document.forms['buscar'].action = "tutoriais.xhtml#"+parametro.value;								
				document.buscar.submit();
			}			
         </script>	
         <style type="text/css">
<!--
.style1 {color: #000000}
-->
         </style>
         <div id="wrapper">
	<div id="header-wrapper">
		<div id="header">
			<div id="logo">
			  <h1><a href="index.xhtml" class="title">BlueLogic</a></h1>
		  </div>
			<div id="menu">
				<ul>
                    <li><a href="index.xhtml">Início</a></li>
					<li class="current_page_item"><a href="material.xhtml">Tutoriais</a></li>
					<li></li>
				    <li><a href="download.xhtml">Download</a></li>
				    <li><a href="contato.xhtml">Contato</a></li>
					<li></li>
				  <li></li>
			  </ul>
		  </div>
	  </div>
	</div>
	<!-- end #header -->
	<div id="page">
		<div id="page-bgtop">
			<div id="page-bgbtm">
			  <div id="content">
					<div class="post">
						<h3 class="title"><a name="androidMapas">Configuração para exibir mapas no Android</a></h3>						
			          <div class="entry">
							<p align="justify" class="post style1">O processo para gerar a chave MD5, apesar de simples  causa um pouco de dor de cabeça. Os passos a seguir mostram como resolver este problema:        </p>
			        <div align="justify" class="style1">
					          <div align="justify">
					            <ol>
					              <li class="post">ABRA O PROMPT DO WINDOWS E DIGITE O  SEGUINTE COMANDO APRESENTADO NA FIGURA ABAIXO:</li>
				                </ol>
		              </div>
			        </div>
					        <p align="justify" class="post style1"><img src="imagens/promptmd5.JPG" width="601" height="334" /></p>
			        <p align="justify" class="style1">EXPLICANDO  MELHOR:<br />
					          Na linha  onde insiro o comando cd C:\Arquivos de programas\Java\jdk1.6.0_24\bin<br />
					          Eu passo o  local onde esta o arquivo Keytool.exe responsável por gerar a chave que iremos  utilizar, após fazer o mesmo em seu computador passar o caminho de ande está  instalado o keytool.exe basta então digitar o restante dos comandos para gerar  a chave. Como disse anteriormente os comandos usados para gerar a chave me  retornaram o seguinte erro:<br />
					          ERRO DE KEYTOOL: JAVA.LANG.IILEGALARGUMNETEXCEPTION:  UNKNOWN FORMAT TYPE AT<br />
					          Este erro me  tirou o sono de algumas noites, para corrigir este problema faça o seguinte:</p>
					        <p align="justify" class="style1">Acesso o Painel de Controle do Windows:</p>
				        <p align="center"><img src="imagens/painelwindowsmd5.JPG" width="482" height="222" /> </p>
					        <p class="style1">Entre na opção: Opções Regionais e de Idioma e execute as  seguintes alterações:</p>
					        <p align="center"><img src="imagens/regionaismd5.JPG" width="481" height="398" /></p>
				        <p align="justify" class="style1">Após realizar estas mudanças basta clicar no botão OK.<br />
Se por acaso em seu computador o Idioma for Inglês e local  Estados Unidos não realize nenhuma alteração.</p>
					        <p align="justify" class="style1">Agora vamos retornar para o PROMPT DO WINDOWS:</p>
				        <p align="center"><img src="imagens/prompt1md5.JPG" width="487" height="232" /></p>
					        <p align="justify" class="post"><span class="style1">Pronto agora basta entra no site:</span>  <a href="http://code.google.com/android/maps-api-signup.html">http://code.google.com/android/maps-api-signup.html</a> <br />
				              <span class="style1">E colocar a  chave gerado pelo keytool.exe</span></p>
					        <p align="justify" class="post style1">Como disse  apesar de simples o processo um detalhe faz toda a diferença, espero  que este tutorial ajude os usuários a resolver o problema de gerar a chave MD5. Até mais.</p>
					        <p align="justify" class="post style1"><span class="style1">Por: Fernando José Esmaniotto</span><br />
E-mail: <a href="mailto:fernandoesmaniotto@gmail.com">fernandoesmaniotto@gmail.com</a></p>
			          </div>
				  </div>
                  
                  <div class="post">
						<h3 class="title"><a name="mapasAndroid">Google Maps no Android</a></h3>						
			          <div class="entry">
							<p>Certamente um dos atrativos  que chamam a atenção do usuário é possibilidade de visualizar mapas do Google  Maps no celular e também integrar com GPS para saber sua localização em tempo  real. O artigo Configuração para exibir mapas no Android mostrou todo o procedimento  necessário para gerar a chave MD5 necessária para utilizar os recursos de mapas  no dispositivo. Este artigo é voltado para criar um aplicativo para visualizar  mapas do Google Maps. O artigo está dividido em três etapas: <br />
1ª  Configurações do arquivo AndroidManifest.xml. </p>
							<p>2ª  Configuração da chave MD5 obtida no site do Google no arquivo main.xml. </p>
							<p>3ª  Codificação.</p>
							<p>1ª Etapa: É configurado o  arquivo AndroidManifest.xml colocando duas instruções para ter acesso aos  recursos de mapas.<br />
  &lt;uses-permission  android:name=&quot;android.permission.INTERNET&quot;/&gt;<br />
  &lt;uses-permission  android:name=&quot;android.permission.ACCESS_FINE_LOCATION&quot;/&gt;</p>
						<p>A instrução  android.permission.INTERNET libera o acesso a internet por parte do dispositivo  móvel, já a instrução android.permission.ACCESS_FINE_LOCATION é utilizada para  localização GPS. Obs.: sem adicionar estar instruções no arquivo  AndroidManifest.xml o recurso do mapa não funciona. Observe abaixo como fica o  código completo.</p>
						<p><img src="imagens/codigomanifestmapas.jpg" alt="" width="600" height="412" /></p>
						<p>2ª Etapa: É realizado a  configuração do arquivo main.xml. Basicamente neste arquivo, é adicionada a  chave MD5 gerada no site do Google, detalhes sobre este procedimento são  encontrados no artigo Configuração para exibir mapas no Android que explica com  detalhes todo o processo. Observe abaixo como fica o código deste arquivo:</p>
						<p><img src="imagens/codigomainmapas.jpg" alt="" width="592" height="166" /></p>
							<p>O trecho de código  importante desta instrução é: android:apikey no qual deve-se colocar a chave  MD5. Obs.: a chave MD5 é única para cada computador.<br />
							  3º Etapa: É realizado a  codificação Java para apresentar o mapa para o usuário. Novamente não existe  muita dificuldade o código é bem simples acompanhe abaixo:</p>
							<p><br />
							  <img src="imagens/codigomapa.jpg" alt="" width="468" height="393" /></p>
							<p><br />
							  Conforme a imagem acima que  mostra o código é possível perceber que a classe MapView é a responsável por  apresentar o mapa para o usuário. Basicamente é este o código necessário para  visualizar mapas no dispositivo móvel. Vale ressaltar que no trecho de código  setContentView é layout adicionado a instrução é referente ao arquivo main.xml  que foi configurado na etapa 2, é possível modificar para outro layout basta  configurar a propriedade android:apikey corretamente. O próximo artigo irá  vincular recursos de localização GPS ao mapa tornando-o ainda mais interativo.  Dúvidas e sugestões www.bluelogic.com.br/contato.xhtml ou pelo e-mail:  fernandoesmaniotto@gmail.com. <br />
							  BlueLogic tecnologia e  conhecimento.</p>
							<p align="justify" class="post style1">&nbsp;</p>
		            </div>
			    </div>

      <div class="post">
						<h3 class="title"><a name="zk">Primeiros passos no Framework ZK</a></h3>
	  <div class="entry">
							<p align="justify"><span class="style1">O Framework ZK é voltado para  construção de aplicações ricas para internet, utilizando para este propósito  tecnologia Java. Este tutorial é voltado para iniciantes, onde será apresentado  um exemplo bem simples da utilização deste Framework.<br />
O primeiro passo para a  utilização do ZK se dá em torno da configuração do ambiente de desenvolvimento. O  ZK oferece interação tanto com a IDE de desenvolvimento Eclipse quanto com o  NetBeans. Porém, neste tutorial será utilizada a IDE Eclipse, a qual será preparada  para o ambiente de desenvolvimento ZK.<br />
Instalação<br />
É necessário ter devidamente  instalado a IDE Eclipse e também um servidor de aplicação neste caso será utilizado  o Apache Tomcat.<br />
O Framework ZK oferece um plugin  chamado ZK Studio. Tal plugin pode ser obtido na  url: </span><a href="http://studioupdate.zkoss.org/studio/update">http://studioupdate.zkoss.org/studio/update</a>.  <span class="style1">Porém a IDE Eclipse oferece um mecanismo para facilitar ainda mais o  procedimento de adicionar um novo plugin. Através do menu HELP / INSTALLL NEW  SOFTWARE, como apresentado na figura 1.</span></p>
			  <p align="center"><img src="imagens/zk1.JPG" width="207" height="268" /></p>
							<p class="style1">Ao selecionar a opção Install New Software será apresentado a  tela para instalação de um novo plugin, observe a figura 2.</p>
							<p align="center"><img src="imagens/zk2.JPG" width="331" height="317" /></p>
              <p class="style1">Para realizar o procedimento de adicionar um novo plugin,  basta clicar sobre o botão Add... . Logo então, será apresentado a janela <strong>Add Repository</strong>. Observe a figura 3.</p>
	                        <p align="center"><img src="imagens/zk3.JPG" width="369" height="128" /></p>
	                        <p class="style1">Note que no campo Location foi digitado a mesma url mencionada  anteriormente, também foi digitado um nome para o plugin, apenas para critério  de organização. Ao clicar no botão OK, a IDE Eclipse retorna para a tela para  adicionar um novo plugin, porém agora será carregado uma lista com o plugin ZK  para realizar a instalação. Observe a figura 4.</p>
	                        <p align="center"><img src="imagens/zk4.JPG" width="339" height="345" /></p>
	                        <p><span class="style1">Nota na figura 4 que o item ZK Studio foi selecionado, basta  agora clicar no botão Next. Na próxima tela basta clicar no botão Next  novamente para acessa uma tela sobre os termos de licença basta aceitar e clicar  no botão Finish para realizar a instalação. Porém ainda falta adicionar libs do  ZK dentro da IDE Eclipse.<br />
Instalando Libs do ZK<br />
Fora a instalação do plugin ZK Studio ainda é necessário  adicionar as libs do ZK no Eclipse. Para realizar este procedimento é  necessário efetuar o download na página: </span><a href="http://zkoss.org/download">http://zkoss.org/download</a>  <span class="style1">e descompactar o arquivo em algum diretório.  Feito os procedimentos de download dos respectivos arquivo,  basta acessar o menu Window / Preferences. Observe a figura 5</span></p>
	                        <p align="center"><img src="imagens/zk5.JPG" width="150" height="235" /></p>
	                        <p class="style1">Acessando a opção Preferences na lateral esquerda da janela  Preferences existe uma opção chamada ZK, obs.: esta opção só aparece se for  realizado a instalação do plugin ZK Studio. Basta então acessar esta opção e  escolher sub opção ZK Packages. Em ZK Packages deve-se adicionar as libs do ZK  para isso basta clicar no botão Add File/Directory  e procurar os arquivos que foram descompactados,  observe a figura 6.</p>
	                        <p align="center"><img src="imagens/zk6.JPG" width="369" height="224" /></p>
	                        <p class="style1">Note que na figura 6 foi adicionado os arquivos das libs do  ZK. Pronto o ambiente está preparado para criar a primeira aplicação ZK.</p>
	                        <p class="style1">Criando o primeiro projeto<br />
	                          Para criar o primeiro projeto usando o Framework ZK, basta  acessa o menu File / New / Other basta escolher a opção ZK Project. Logo será  apresentada a tela para configuração do projeto ZK Studio, observe a figura 7</p>
	                        <p align="center"><img src="imagens/zk7.JPG" alt="" width="317" height="318" /></p>
	                        <p class="style1">Nesta parte são configurados os seguintes itens:<br />
Project name: Define o nome para o projeto<br />
Target runtime: Define o servidor de aplicação.<br />
Configurados os itens basta clicar no botão Next duas vezes  e por fim Finish. Pronto o primeiro projeto ZK está finalizado. <br />
Iniciando a aplicação<br />
Para iniciar a aplicação e ver o resultado, para isso basta  clicar com o botão direito do mouse sobre o projeto opção Run As / Run on  Server . A figura 8 mostra o resultado no browser interno da IDE Eclipse  observe.  </p>
	                        <p align="center"><img src="imagens/zk8.JPG" width="422" height="308" /></p>
	                        <p class="style1">Este tutorial chega ao fim demonstrando todo o processo para  instalação do plugin na IDE Eclipse e também o início do primeiro projeto. Os  próximos tutoriais terão abordagem  mais avançadas.</p>
	                        <p><span class="style1">Por: Fernando José Esmaniotto</span><br />
	                          E-mail: <a href="mailto:fernandoesmaniotto@gmail.com">fernandoesmaniotto@gmail.com</a></p>
	  </div>
				  </div>

                </div>
                
                
                
                
                
				<!-- end #content -->
				<div id="sidebar">
                  <ul>
                    <li>
                      <div style="clear: both;">&nbsp;</div>
                    </li>
                    <li>
                      <h2>Download</h2>
                    </li>
                    <li><ul>
                      <li><a href="download.xhtml">Apostilas/Códigos fonte</a></li>
                      <li>
                        <!-- Inicio CÃ³digo Contador MHost2 -->
                      </li>
                      <li></li>
                      </ul>
                    </li>
                  </ul>
                 
			  </div> 
              	          
				<!-- end #sidebar -->
				<div style="clear: both;">&nbsp;</div>
			</div>
             <div id="pages">
					<ul>
						<li class="nolink">« Anterior</li>
						<li class="current">1</li>
						<li><a href="material1.xhtml">2</a></li>
						<li><a href="material1.xhtml">Próximo »</a></li>
					</ul>
				</div>   
	</div>    
</div>
</div>
</h:body>
</html>

